<template>
	<div>
		<div class="container">

			<div style="display: flex;padding-top: 0.5em;">
				<div style="margin-left: 0.2em;" @click="toBack">
					<image src="/static/imgs/back.png" style="width: 1.5em;" mode="widthFix"></image>
				</div>
				<div></div>
			</div>
			<div style="position: relative;">
				<image src="/login/static/loginbg.png" style="width: 100%;height: 9em;margin-top: 2em;">
				</image>
			</div>
			<div style="position: relative;">
				<div class="loginFrame">
					<div
						style="background-color: #5D5D5D;height: 2em;line-height:2em;border-top-left-radius: 10px;border-top-right-radius: 10px;color:#fff;font-size: 0.8em;">
						<div>
							<div style="float: left;margin-top: 0.15em;margin-left: 0.2em;margin-right: 0.2em;">
								<image src="/login/static/my.png" style="width: 1.0em;height: 1.0em;">
								</image>
							</div>
							<div style="float: left;">服务商登录</div>
							<div class="clear"></div>
						</div>
						<div style="margin: 0.8em;color: #5D5D5D;">
							<div>登录用户名</div>
							<div><uni-easyinput type="text" v-model="obj.joinPhone" placeholder="请输入用户名" /></div>
							<div>登录密码</div>
							<div><uni-easyinput type="text" v-model="obj.joinPass" placeholder="请输入登录密码" /></div>
							<div style="margin-top: 0.7em;"><button
									style="background-color: #5D5D5D;color: #fff;height:1.8em;line-height: 1.7em;"
									@click="login">点击登录</button>
							</div>
							<div style="text-align: right;margin-right: 0.3em;margin-top: 0.2em;"><a
									style="color: #5D5D5D;" @click="register">加盟店申请</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import api from '@/common/httprequest.js'
	let obj = reactive({
		'joinPhone': '',
		'joinPass': ''
	});

	const login = () => {
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/league/login",
			params: {
				"joinPhone": obj.joinPhone,
				"joinPass": obj.joinPass
			},
		}).then(res => {
			uni.hideLoading();
			// console.log('loginres',res);
			// return;
			if (res.code == 200) {
				uni.setStorageSync('token', res.msg);
				console.log('token', res.msg)
				uni.showToast({
					duration: 1000,
					icon: 'success',
					title: '登录成功！'
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}, 2000)
			} else {
				uni.showToast({
					duration: 1000,
					icon: 'error',
					title: res.msg
				})
			}
		});
	}

	const register = () => {
		uni.redirectTo({
			url: '/shop/register'
		})
	}

	const toBack = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
</script>

<style scoped>
	.container {
		background-color: #000;
		width: 100%;
		height: 100vh;
	}

	.loginFrame {
		margin-left: 0.2em;
		margin-right: 0.2em;
		background-color: #fff;
		border-radius: 10px;
		height: 15em;
	}

	.clear {
		clear: both;
	}
</style>